<%layout("/common/layout.html"){%>

<div class="container">
    <article class="row">
        <section class="col-md-3 ds-upload">
            <ul class="nav nav-tabs">
                <li role="presentation">
                    <a href="">添加/上传图片</a>
                </li>
            </ul>
            <div class="ds-btn-upload">
                <button class="btn btn-info" id="ds-upload">
                    <span class="glyphicon glyphicon-open"></span>
                    上传图片
                </button>
                <input type="file" name="ds-form-upload" id="f-upload" class="f-upload">

                <p class="ds-tip">
                    提示：为达到最佳效果，请上传高分辨率图片<br/>
                    最大：5M <br>
                    文件类型：jpg,png
                </p>
            </div>
            <div class="ds-meta">
                <p class="ds-meta-head">
                    素材
                    <button class="btn btn-info ds-switch">
                        <span class="glyphicon glyphicon-refresh"></span>换一批
                    </button>
                </p>
                <ul>
                    <li>
                        <img src="images/show2.jpg" alt="" class="img-thumbnail">
                    </li>
                    <li>
                        <img src="images/show.jpg" alt="" class="img-thumbnail">
                    </li>
                    <li>
                        <img src="images/show2.jpg" alt="" class="img-thumbnail">
                    </li>
                    <li>
                        <img src="images/show2.jpg" alt="" class="img-thumbnail">
                    </li>
                    <li>
                        <img src="images/show2.jpg" alt="" class="img-thumbnail">
                    </li>
                    <li>
                        <img src="images/show2.jpg" alt="" class="img-thumbnail">
                    </li>
                </ul>
            </div>
        </section>
        <section class="col-md-6 ds-t">
            <img src="images/t-prototype.jpg" alt="" class="t-prototype">

            <div class="ds-imgup-wrap">
                <img src="" alt="插入图片的位置" class="ds-imgup">
            </div>
            <!-- google_ad_section_start(weight=ignore) -->

            <!--[if !IE]>
            <![IGNORE[-->
            <![IGNORE[]]>
            <canvas class="canvas" id="canvasBackground"></canvas>
            <!--<![endif]-->

            <!--[if IE]>
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
                    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
                    width="220" height="330" id="bomomo" class="canvas" align="middle">
                <param name="allowScriptAccess" value="sameDomain"/>
                <param name="allowFullScreen" value="false"/>
                <param name="movie" value="bomomo.swf"/>
                <param name="quality" value="high"/>
                <param name="bgcolor" value="#ffffff"/>
                <embed src="bomomo.swf" quality="high" bgcolor="#ffffff" width="220" height="330" name="bomomo"
                       align="middle" allowScriptAccess="sameDomain" allowFullScreen="false"
                       type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
            </object>
            <![endif]-->

            <!--[if !IE]>
            <![IGNORE[-->
            <![IGNORE[]]>
            <canvas class="canvas" id="canvasForeground"
                    onmousedown="handleMouseDown(event)" onmouseup="handleMouseUp(event)"
                    onmouseover="handleMouseIn(event)" onmouseout="handleMouseOut(event)"
                    onmousemove="handleMouseMoved(event)"
                    ></canvas>
            <!--<![endif]-->
        </section>
        <section class="col-md-3 ds-tools">
            <div class="ds-tool">
                <button class="btn btn-info" id="ds-save" title="保存到本地">
                    <span class="glyphicon glyphicon-floppy-save"></span>
                </button>
                <button class="btn btn-info" id="ds-new" title="新建">
                    <spanglyphicon class="glyphicon glyphicon-repeat"></spanglyphicon>
                </button>
            </div>
            <div class="ds-bomomo ds-tool" id="tools">
                <p>
                    <button class="btn btn-info">bomomo工具栏</button>
                    &nbsp;&nbsp;&nbsp;thanks for
                    <a href="http://bomomo.com/">bobomo</a>
                </p>
					<span class="ds-button" id="button1" onclick="buttonClicked(1)" onmouseover="buttonOver(1)"
                          onmouseout="buttonOut(1)">
						<img src="${ctxPath}/images/button/1.png" alt=""/>
					</span>
					<span class="ds-button" id="button2" onclick="buttonClicked(2)" onmouseover="buttonOver(2)"
                          onmouseout="buttonOut(2)">
						<img src="${ctxPath}/images/button/2.png" alt=""/>
					</span>
					<span class="ds-button" id="button3" onclick="buttonClicked(3)" onmouseover="buttonOver(3)"
                          onmouseout="buttonOut(3)">
						<img src="${ctxPath}/images/button/3.png" alt=""/>
					</span>
					<span class="ds-button" id="button4" onclick="buttonClicked(4)" onmouseover="buttonOver(4)"
                          onmouseout="buttonOut(4)">
						<img src="${ctxPath}/images/button/4.png" alt=""/>
					</span>
					<span class="ds-button" id="button5" onclick="buttonClicked(5)" onmouseover="buttonOver(5)"
                          onmouseout="buttonOut(5)">
						<img src="${ctxPath}/images/button/5.png" alt=""/>
					</span>
					<span class="ds-button" id="button6" onclick="buttonClicked(6)" onmouseover="buttonOver(6)"
                          onmouseout="buttonOut(6)">
						<img src="${ctxPath}/images/button/6.png" alt=""/>
					</span>
					<span class="ds-button" id="button7" onclick="buttonClicked(7)" onmouseover="buttonOver(7)"
                          onmouseout="buttonOut(7)">
						<img src="${ctxPath}/images/button/7.png" alt=""/>
					</span>
					<span class="ds-button" id="button8" onclick="buttonClicked(8)" onmouseover="buttonOver(8)"
                          onmouseout="buttonOut(8)">
						<img src="${ctxPath}/images/button/8.png" alt=""/>
					</span>
					<span class="ds-button" id="button9" onclick="buttonClicked(9)" onmouseover="buttonOver(9)"
                          onmouseout="buttonOut(9)">
						<img src="${ctxPath}/images/button/9.png" alt=""/>
					</span>
					<span class="ds-button" id="button10" onclick="buttonClicked(10)" onmouseover="buttonOver(10)"
                          onmouseout="buttonOut(10)">
						<img src="${ctxPath}/images/button/10.png" alt=""/>
					</span>
					<span class="ds-button" id="button11" onclick="buttonClicked(11)" onmouseover="buttonOver(11)"
                          onmouseout="buttonOut(11)">
						<img src="${ctxPath}/images/button/11.png" alt=""/>
					</span>
					<span class="ds-button" id="button12" onclick="buttonClicked(12)" onmouseover="buttonOver(12)"
                          onmouseout="buttonOut(12)">
						<img src="${ctxPath}/images/button/12.png" alt=""/>
					</span>
					<span class="ds-button" id="button13" onclick="buttonClicked(13)" onmouseover="buttonOver(13)"
                          onmouseout="buttonOut(13)">
						<img src="${ctxPath}/images/button/13.png" alt=""/>
					</span>
					<span class="ds-button" id="button14" onclick="buttonClicked(14)" onmouseover="buttonOver(14)"
                          onmouseout="buttonOut(14)">
						<img src="${ctxPath}/images/button/14.png" alt=""/>
					</span>
					<span class="ds-button" id="button15" onclick="buttonClicked(15)" onmouseover="buttonOver(15)"
                          onmouseout="buttonOut(15)">
						<img src="${ctxPath}/images/button/15.png" alt=""/>
					</span>
					<span class="ds-button" id="button16" onclick="buttonClicked(16)" onmouseover="buttonOver(16)"
                          onmouseout="buttonOut(16)">
						<img src="${ctxPath}/images/button/16.png" alt=""/>
					</span>
					<span class="ds-button" id="button17" onclick="buttonClicked(17)" onmouseover="buttonOver(17)"
                          onmouseout="buttonOut(17)">
						<img src="${ctxPath}/images/button/17.png" alt=""/>
					</span>
					<span class="ds-button" id="button18" onclick="buttonClicked(18)" onmouseover="buttonOver(18)"
                          onmouseout="buttonOut(18)">
						<img src="${ctxPath}/images/button/18.png" alt=""/>
					</span>
					<span class="ds-button" id="button19" onclick="buttonClicked(19)" onmouseover="buttonOver(19)"
                          onmouseout="buttonOut(19)">
						<img src="${ctxPath}/images/button/19.png" alt=""/>
					</span>
					<span class="ds-button" id="button20" onclick="buttonClicked(20)" onmouseover="buttonOver(20)"
                          onmouseout="buttonOut(20)">
						<img src="${ctxPath}/images/button/20.png" alt=""/>
					</span>
            </div>
            <div class="ds-tool">
                <button class="btn btn-info" id="ds-extra" disabled>
                    <span class="glyphicon glyphicon-sort"></span>
                    <span class="toggleZ">将上传图片显示在下层</span>
                </button>
                <p class="ds-tip">
                    图片编辑可用功能：拖拽、缩放。<br/>
                    编辑图片时请将图片置于上层。<br/>
                    使用bomomo工具栏时请将图片置于下层。<br/>
                </p>
            </div>
        </section>
        <section class="panel panel-default add-desc">
            <div class="panel-heading ds-ph">很棒的设计！为它添加一些描述吧~</div>
            <div class="panel-body">
                <div class="form-group clearfix">
                    <label for="ds-head" class="col-sm-2 control-label">标题</label>

                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="ds-head" placeholder="你的标题">
                    </div>
                </div>

                <div class="form-group clearfix">
                    <label for="ds-head" class="col-sm-2 control-label">分类</label>

                    <div class="col-sm-10">
                        <select multiple id="ds-sort" class="form-control">
                            <%for(sort in sorts){%>
                            <option value="${sort.id}">${sort.name}</option>
                            <%}%>
                        </select>
                    </div>
                </div>


                <div class="form-group">
                    <label for="ds-desc" class="col-sm-2 control-label">描述</label>

                    <div class="col-sm-10">
                        <textarea class="ds-desc panel-body form-control" id="ds-desc"
                                  placeholder="说点什么呢......"></textarea>
                    </div>
                </div>
            </div>
            <button class="btn pull-left btn-default" data-dismiss="modal">取消</button>
            <button class="btn btn-info pull-right ds-finish">确定</button>

        </section>
    </article>
</div>


<script src="${ctxPath}/js/default.js"></script>
<script src="${ctxPath}/js/jquery-2.1.1.min.js"></script>
<script src="${ctxPath}/js/jquery-ui.min.js"></script>
<script src="${ctxPath}/js/bootstrap.min.js"></script>
<script src="${ctxPath}/js/nav.js"></script>
<script src="${ctxPath}/js/ds.js"></script>

<%}%>